﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA Admin Theme Documentation</title>

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">

    <style>

        .documentation .jumbotron .row {
            padding-top: 60px;
        }

        .anchor {
            padding-top: 50px;
        }

    </style>
</head>
<body class="documentation">


<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">INSPINIA - Documentation</a>
        </div>
    </div>
</div>

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="img/angular_logo.png" alt="angular_logo">

                <h2>Inspinia AngularJS</h2>
                <small>
                    Inspinia AngularJs is full supported Angularjs version of INSPINIA theme.
                </small>
                <br/>

                <p>Thank you for purchasing INSPINIA admin theme. If you have any questions about the template, please feel free to contact us via email: <a href="mailto:support@webapplayers.com">support@webapplayers.com</a>.
                </p>
                <small>

                    <strong>Documentation created:</strong> 02/09/2014<br/>
                    <strong>Latest update:</strong> 06/01/2017<br/>
                    <strong>By:</strong> WebAppLayers Team<br/>
                    <strong>Theme version:</strong> 2.7<br/>

                </small>
                <br/>
                <small>
                    For HTML/CSS documentation go to: <a href="index.html">Static HTML/CSS documentation.</a><br/>
                    For ASP.NET MVC documentation go to: <a href="asp.net.mvc.html">ASP.NET MVC documentation.</a><br/>
                    For Ruby on Rails documentation go to: <a href="rails.html">RAILS documentation.</a><br/>
                    For Meteor documentation go to: <a href="meteor.html">METEOR documentation.</a>
                </small>
            </div>
            <div class="col-md-6">
                <img src="img/preview.png" alt="screen" class="img-responsive"/>

            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-danger">
                    Please note that since Inspinia 2.5 we upgrade all Angular project to Angular 1.5 as well as all UI Bootstrap library to 1.1.2.
                    This update required to change all prefixes in UI Bootstrap - if you will update your exisitng project full migration path you can find here: https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes.
                    All current version are prepared with new prefixes.
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container">

<div class="row">

    <div class="col-lg-12">

        <h2>
            Table of Contents
        </h2>

        <ul>

            <li><a href="#documentation">About documentation</a></li>
            <li><a href="#folder_structure">Folder structure</a></li>
            <li><a href="#layout_structure">Layout structure</a></li>
            <li><a href="#route_config">Route config / Lazy load</a></li>
            <li><a href="#options">Options</a>
                <ul>
                    <li><a href="#fixed_sidebar">Fixed sidebar</a></li>
                    <li><a href="#fixed_navbar">Fixed navbar</a></li>
                    <li><a href="#fixed_navbar2">Fixed navbar v.2</a></li>
                    <li><a href="#fixed_footer">Fixed footer</a></li>
                    <li><a href="#rtl_support">RTL support</a></li>
                    <li><a href="#layout_2">Layout 2</a></li>
                    <li><a href="#off_canvas_menu">Off canvas menu</a></li>
                    <li><a href="#skins">Skins</a></li>
                    <li><a href="#themeconfig">Theme config</a></li>
                </ul>
            </li>
            <li><a href="#seed_project">Seed Project</a></li>
            <li><a href="#grunt">Grunt Seed Project</a></li>
            <li><a href="#gulp">Gulp Seed Project</a></li>
            <li><a href="#meanjs">MEANJS Seed Project</a></li>
            <li><a href="#change_log">Change log v.2.6.2 -> v.2.7</a></li>
            <li><a href="#change_log">Change log v.2.6 -> v.2.6.2</a></li>
            <li><a href="#change_log">Change log v.2.5 -> v.2.6</a></li>
            <li><a href="#change_log">Change log v.2.4 -> v.2.5</a></li>
            <li><a href="#change_log">Change log v.2.3 -> v.2.4</a></li>
            <li><a href="#change_log">Change log v.2.2 -> v.2.3</a></li>
            <li><a href="#change_log">Change log v.2.0/2.1 -> v.2.2</a></li>
            <li><a href="#change_log">Change log v.2.0 -> v.2.1</a></li>
            <li><a href="#change_log">Change log v.1.9 -> v.2.0</a></li>
            <li><a href="#change_log">Change log v.1.9 -> v.1.9.2</a></li>
            <li><a href="#change_log">Change log v.1.8 -> v.1.9</a></li>
            <li><a href="#contact">Contacts</a></li>


        </ul>


    </div>

</div>


<div class="row">
<a name="documentation" class="anchor"></a>

<div class="col-md-12">
<h3>About the documentation</h3>

<p>
    This documentation is focused on AngularJs version. It assumes a minimum knowledge of angular framework. It describe mainly files and structure in project.
    Please note that this documentation is dedicated to the main element of the template. With each version, we will try to develop it. But if you have any questions going beyond what is described
    here don't hesitate to write to us on support email. We would love to help.
</p>

<div>
</div>
<div class="row">
    <a name="folder_structure" class="anchor"></a>
    <div class="col-md-6">
        <h3>Structure</h3>
        <h4>Folders and files</h4>

        <p>File pack containing INSPINIA Angular template consists of 6 folders and 6 html files (in the main folder).</p>

        <div><pre class="prettyprint linenums">
<code>Angular_version/
    ├── <strong>css/</strong>
    ├── <strong>email_templates/</strong>
    ├── <strong>font-awsome/</strong>
    ├── <strong>fonts/</strong>
    ├── <strong>img/</strong>
    ├── <strong>js/</strong>
    ├── <strong>views/</strong>
    ├── index.html
    ├── favicon.ico </code></pre>
        </div>

        <div><pre class="prettyprint linenums">
<code>js/
    ├── <strong>angular/</strong>
    ├── <strong>angular-translate/</strong>
    ├── <strong>bootstrap/</strong>
    ├── <strong>jquery/</strong>
    ├── <strong>plugins/</strong>
    ├── <strong>ui-router/</strong>
    ├── app.js
    ├── config.js
    ├── controllers.js
    ├── directives.js
    ├── inspinia.js
    ├── translations.js </code></pre>
        </div>

    </div>
    <div class="col-md-6">
        <h3>Main HTML elements</h3>

        <p>Main index file are created with few main elements:</p>
        <ol>
            <li><code>navigation</code> left sidebar navigation.</li>
            <li><code>top navbar</code> top navigation with second menu.</li>
            <li><code>ui-view</code> main container for page elements.</li>
            <li><code>footer</code> footer element.</li>
        </ol>

        <a target="_blank" href="img/page_angular.png"><img class="img-responsive" src="img/page_angular.png" alt="page structure"></a>
    </div>
</div>
<div class="row">
<a name="layout_structure" class="anchor"></a>
<div class="col-lg-12">
<h3>Layout structure</h3>

<p>Page <code>&lt;head /&gt;</code> contains Metadata and all CSS files for theme and for all plugins. In your app you can choose only that file that you will use.</p>
            <pre class="prettyprint linenums">

&lt;!DOCTYPE html&gt;
&lt;html ng-app="inspinia"&gt;

&lt;head&gt;

    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;

    &lt;!-- Page title set in pageTitle directive --&gt;
    &lt;title page-title&gt;&lt;/title&gt;

    &lt;!-- Font awesome --&gt;
    &lt;link href="font-awesome/css/font-awesome.css" rel="stylesheet"&gt;

    &lt;!-- Bootstrap and Fonts --&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;

    &lt;!-- Main Inspinia CSS files --&gt;
    &lt;link href="css/animate.css" rel="stylesheet"&gt;
    &lt;link id="loadBefore" href="css/style.css" rel="stylesheet"&gt;


&lt;/head&gt;
</pre>

<hr>
<h3>Main index.html structure</h3>

<p>The body element has only one element <code><div ui-view></div></code> It is used to include all content of partial page.</p>

<pre class="prettyprint linenums">
&lt;!-- ControllerAs syntax --&gt;
&lt;!-- Main controller with serveral data used in Inspinia theme on diferent view --&gt;
&lt;body ng-controller="MainCtrl as main"&gt;

&lt;!-- Main view  --&gt;
&lt;div ui-view&gt;&lt;/div&gt;

            </pre>

<p>Layout structure.  Each state use template as a layout of page. Layout is located in views/common/content.html file and the structure looks like this:</p>

            <pre class="prettyprint linenums">
&lt;!-- Wrapper--&gt;
&lt;div id="wrapper"&gt;

    &lt;!-- Navigation --&gt;
    &lt;div ng-include="'views/common/navigation.html'"&gt;&lt;/div&gt;

    &lt;!-- Page wraper --&gt;
    &lt;!-- ng-class with current state name give you the ability to extended customization your view --&gt;
    &lt;div id="page-wrapper" class="gray-bg {{$state.current.name}}"&gt;

        &lt;!-- Page wrapper --&gt;
        &lt;div ng-include="'views/common/topnavbar.html'"&gt;&lt;/div&gt;

        &lt;!-- Main view  --&gt;
        &lt;div ui-view&gt;&lt;/div&gt;

        &lt;!-- Footer --&gt;
        &lt;div ng-include="'views/common/footer.html'"&gt;&lt;/div&gt;

    &lt;/div&gt;
    &lt;!-- End page wrapper--&gt;

&lt;/div&gt;
&lt;!-- End wrapper--&gt;

            </pre>
<p>
    This separation gives you ability to create and modify own layout structure for different pages. For example Dashboard 4 has different layout - content_top navigation (without sidebar navigation).
</p>


            <pre class="prettyprint linenums">
&lt;!-- Wrapper--&gt;
&lt;div id="wrapper" class="top-navigation"&gt;

    &lt;!-- Navigation --&gt;
    &lt;div ng-include="'views/common/top_navigation.html'"&gt;&lt;/div&gt;

    &lt;!-- Page wraper --&gt;
    &lt;!-- ng-class with current state name give you the ability to extended customization your view --&gt;
    &lt;div id="page-wrapper" class="gray-bg {{$state.current.name}}"&gt;

        &lt;!-- Main view  --&gt;
        &lt;div ui-view&gt;&lt;/div&gt;

        &lt;!-- Footer --&gt;
        &lt;div ng-include="'views/common/footer.html'"&gt;&lt;/div&gt;

    &lt;/div&gt;
    &lt;!-- End page wrapper--&gt;

&lt;/div&gt;
&lt;!-- End wrapper--&gt;

            </pre>

<hr>
<h3>Page Script </h3>

<p>On bottom of file there are scripts. Index.html contains main plugin scripts. Rest of the scripts (plugins, directive .etc are included dynamical by ocLazyLoad)
    After that there is a angular script with controllers and directives files. In Inspinia admin theme we use flat structure of controllers and directives files witch mean that all controllers and directives is in one file.
    Of course in live app we will probably separate those functions for separate file and use ocLazyLoad to load it when the app need it. Look at the section with routing to get more info how to load file dynamical.
</p>
            <pre class="prettyprint linenums">

&lt;!-- jQuery and Bootstrap --&gt;
&lt;script src="js/jquery/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
&lt;script src="js/plugins/jquery-ui/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="js/bootstrap/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;!-- MetsiMenu --&gt;
&lt;script src="js/plugins/metisMenu/jquery.metisMenu.js"&gt;&lt;/script&gt;

&lt;!-- SlimScroll --&gt;
&lt;script src="js/plugins/slimscroll/jquery.slimscroll.min.js"&gt;&lt;/script&gt;

&lt;!-- Peace JS --&gt;
&lt;script src="js/plugins/pace/pace.min.js"&gt;&lt;/script&gt;

&lt;!-- Custom and plugin javascript --&gt;
&lt;script src="js/inspinia.js"&gt;&lt;/script&gt;

&lt;!-- Main Angular scripts--&gt;
&lt;script src="js/angular/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="js/plugins/oclazyload/dist/ocLazyLoad.min.js"&gt;&lt;/script&gt;
&lt;script src="js/angular-translate/angular-translate.min.js"&gt;&lt;/script&gt;
&lt;script src="js/ui-router/angular-ui-router.min.js"&gt;&lt;/script&gt;
&lt;script src="js/bootstrap/ui-bootstrap-tpls-1.1.2.min.js"&gt;&lt;/script&gt;

&lt;!--
 You need to include this script on any page that has a Google Map.
 When using Google Maps on your own site you MUST signup for your own API key at:
 https://developers.google.com/maps/documentation/javascript/tutorial#api_key
 After your sign up replace the key in the URL below..
--&gt;
&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQTpXj82d8UpCi97wzo_nKXL7nYrd4G70"&gt;&lt;/script&gt;

&lt;!-- Anglar App Script --&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;
&lt;script src="js/config.js"&gt;&lt;/script&gt;
&lt;script src="js/translations.js"&gt;&lt;/script&gt;
&lt;script src="js/directives.js"&gt;&lt;/script&gt;
&lt;script src="js/controllers.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

</pre>

<hr>
<a name="route_config" class="anchor"></a>
<h3>Route config / Lazy load</h3>

<p>To manage all route we use great plugin Ui.Router. AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the
    $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
    <br/>
    <br/>
    Below you can see example of configuration ui-view. Configuration routing are in config.js file
</p>
            <pre class="prettyprint linenums">

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    $urlRouterProvider.otherwise("/dashboards/dashboard_1");
    $stateProvider

        // Other states
        .....

        .state('app.contacts', {
            url: "/contacts",
            templateUrl: "views/contacts.html",
            data: { pageTitle: 'Contacts' }
        })
        .....
        // Other states


</pre>
<p>
    To avoid include all plugins files in first load you can include it dynamically. In each state we use ocLazyLoad module to dynamically load required (for state) resources/files.
    For example if your view will have a flot chart then you will need have a flot js script files, flot css style files and flot angular directive files. You can of course include it in main index file
    but it is suggested to load those files when the app is real need it - in state. Below is example of Dashbard 1 which loads three different plugins: Flot chart, Peiti chart, ChartJS.
</p>


<pre class="prettyprint linenums">
.state('dashboards.dashboard_1', {
            url: "/dashboard_1",
            templateUrl: "views/dashboard_1.html",
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {

                            serie: true,
                            name: 'angular-flot',
                            files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
                        },
                        {
                            name: 'angles',
                            files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js']
                        },
                        {
                            name: 'angular-peity',
                            files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js']
                        }
                    ]);
                }
            }
        })
                </pre>

<p>

    In first we load angular flot chart and all necessary files for it. We specify option <code>serie: true</code> to load all files sequentially.
    Next you have to add name of module - <strong>it has to be the same name as the angular directive has</strong>.
    In this example angular flot chart directive has name: angular-flot. And finally you must specify all files in array syntax.

</p>

<p>

    Same with ChartJs and Peity charts. The directive for CharJS has name angles and we have to specify this name and specify all files.
    The directive for Peity charts has name angular-peity and we have to specify this name and specify all files.

</p>
<p>

    In full version (config file) you can find examples for all resources/directive/files with ocLazyLoad. But if you will include some new plugins you can always
    go to directive file and check what is the name of this directive and specify it with name on state lazy laod.

</p>

<a name="options" class="anchor"></a>
<h3>Options</h3>

<p>Inspinia provide few option for you layout app. There are:

<ul>
    <li>Fixed sidebar</li>
    <li>Fixed navbar</li>
    <li>Fixed footer</li>
    <li>RTL support</li>
    <li>Layout 2 (top navigation)</li>
    <li>Off canvas menu</li>
    <li>Skins</li>
</ul>

</p>

<a name="fixed_sidebar" class="anchor"></a>
<h4>Fixed sidebar</h4>

<p>
    Fixed sidebar is a sidebar that is sticked on screen.

</p>
<p>
    To add fixed sidebar you  need to add .fixed-sidebar class to body.
</p>

<pre class="prettyprint linenums">

    &lt;body ng-controller="MainCtrl as main" class="fixed-sidebar"&gt;

</pre>

<p>
    Next we will need to add slimScroll handle for sidebar. Go to js/directives.js file and find the sideNavigation() function and change it to this:

</p>


<pre class="prettyprint linenums">

function sideNavigation($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {

            // Call the metsiMenu plugin and plug it to sidebar navigation
            $timeout(function(){
                element.metisMenu();
            });

            // Enable initial fixed sidebar
            var sidebar = element.parent();
            sidebar.slimScroll({
                height: '100%',
                railOpacity: 0.9,
            });
        }
    };
};


</pre>
<p>
    Be sure that you have included this files to your index.html file:

    <pre class="prettyprint linenums">

        &lt;!-- SlimScroll --&gt;
        &lt;script src="js/plugins/slimscroll/jquery.slimscroll.min.js"&gt;&lt;/script&gt;

    </pre>

</p>




<a name="fixed_navbar" class="anchor"></a>
<h4>Fixed navbar</h4>

<p>
    Fixed navbar is a top navbar that is sticked on screen.

</p>
<p>
    To add fixed sidebar you  need to add .fixed-nav class to body.
</p>

<pre class="prettyprint linenums">

    &lt;body ng-controller="MainCtrl as main" class="fixed-nav"&gt;

</pre>

<p>
    Next we will need to change navbar from static to fixed. To do this go to views/common/topnavbar.html file and change .navbar-static-top class to navbar-fixed-top

</p>


<pre class="prettyprint linenums">

&lt;nav class="navbar navbar-fixed-top" role="navigation"&gt;

</pre>

    <a name="fixed_navbar2" class="anchor"></a>
    <h4>Fixed navbar 2</h4>

    <p>
        Fixed navbar 2 is a top navbar that is sticked on screen and it's width is the same as the width of wrapper

    </p>
    <p>
        To add fixed sidebar you  need to add .fixed-nav class and .fixed-nav-basic class to body.
    </p>

<pre class="prettyprint linenums">

    &lt;body ng-controller="MainCtrl as main" class="fixed-nav fixed-nav-basic"&gt;

</pre>

    <p>
        Next we will need to change navbar from static to fixed. To do this go to views/common/topnavbar.html file and change .navbar-static-top class to navbar-fixed-top

    </p>


<pre class="prettyprint linenums">

&lt;nav class="navbar navbar-fixed-top" role="navigation"&gt;

</pre>


    <p>
        Fixed navbar 2 works only on primary layout

    </p>


<a name="fixed_footer" class="anchor"></a>
<h4>Fixed footer</h4>

<p>
    Fixed footer is a bottom footer that is sticked on screen.

</p>
<p>
    To add fixed bottom footer you just need to add .fixed class to footer class on views/common/footer.html file.
</p>

<pre class="prettyprint linenums">

    &lt;div class="footer fixed"&gt;

</pre>


<a name="rtl_support" class="anchor"></a>
<h4>Right-to-Left Language Support </h4>

<p>
    Adding support for language written in a Right-To-Left (RTL) direction.

</p>
<p>
    To add RTL support you will need to add new .rtls class to body element
</p>

<pre class="prettyprint linenums">

    &lt;body ng-controller="MainCtrl as main" class="rtls"&gt;

</pre>

<p>
    Next you will need to add new bootstrap rtl support library bootstrap-rtl. Add new link to css file just below the css from bootstrap in index.html page like this:
</p>

<pre class="prettyprint linenums">

    &lt;!-- Bootstrap --&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="css/plugins/bootstrap-rtl/bootstrap-rtl.min.css" rel="stylesheet"&gt;

</pre>

<p>
    After that you will have RTL support similar to this:

</p>

<img class="img-responsive" src="img/rtl_support.png" alt="">


<a name="layout_2" class="anchor"></a>
<h4>Layout 2</h4>

<p>
    Layout 2 is a top navigation with centered content layout.

</p>
<p>
    For layout 2 we prepared special examples files in views/common
</p>

<ul>
    <li>
        content_top_navigation.html
    </li>
    <li>
        top_navigation.html
    </li>
</ul>

<p>
    To use layout 2 all you need to do is to specify it with your state: (example from dashbard 4). In first you need to specify the templateUrl
</p>

<pre class="prettyprint linenums">

    .state('dashboards_top', {
            abstract: true,
            url: "/dashboards_top",
            templateUrl: "views/common/content_top_navigation.html",
        })

</pre>

<p>
    Next when you create new page all you need to do is to point to that abstract state like this:

</p>

<pre class="prettyprint linenums">

.state('dashboards_top.dashboard_4', {
            url: "/dashboard_4",
            templateUrl: "views/dashboard_4.html",
            data: { pageTitle: 'Dashboard 4' },
    }

</pre>

<p>
    And you will get a Layout 2.

</p>

<img class="img-responsive" src="img/Dashboard_4.png" alt="">

<p>

    You have to remember that now your menu is located in views/common/top_navigation.html file.
</p>

    <a name="off_canvas_menu" class="anchor"></a>
    <h4>Off canvas menu</h4>

    <p>
        Off canvas menu is a menu that not change the width of main wrapper page. It appear on top of the page.

    </p>
    <p>
        To use off canvas menu you just need to add <code>.canvas-menu</code> to body element:

    </p>
    <pre class="prettyprint linenums">

    &lt;body class="canvas-menu"&gt;

</pre>

    <p>And add extra directives in navigation.html. Firstly add <code>full-scroll</code> directive to <code>.sidebar-collapse</code> element like:</p>

        <pre class="prettyprint linenums">

    &lt;div class="sidebar-collapse" full-scroll&gt;

</pre>

    <p>Next add new <code>clos-off-canvas</code> directive after <code>.sidebar-collapse</code> element like:</p>

        <pre class="prettyprint linenums">

    &lt;div class="sidebar-collapse" full-scroll&gt;
    &lt;span close-off-canvas&gt;&lt;/span&gt;

</pre>


<a name="skins" class="anchor"></a>
<h4>Skins</h4>

<p>Inspinai theme has 3 diferent skins</p>

<p><strong>To change skin you just have to add skin class to body element.</strong></p>

<p>For example: to add skin Blue skin you just need to add <code>.skin-1</code> class to body element.</p>

<p>In LESS files skins.less you can find style for the skin. Below is a representation of css classes demand color skin.</p>
<ul>
    <li><code>.skin-1</code> - Blue Light</li>
    <li><code>.skin-2</code> - Inspinia Ultra {for support with Inspinai Ultra please contact with support@webapplayers.com}</li>
    <li><code>.skin-3</code> - Yellow/purple</li>
    <li><code>.md-skin</code> - Material Design Skin (In demo Inspinia Material Design version has also fixed sidebar and fixed navbar option)</li>
    <li>Defaut skin does not need any class</li>
</ul>

<a name="themeconfig" class="anchor"></a>
<h4>Theme config</h4>

<p>Theme config is the configuration box for setting options in live preview. It is placed in the right side of page with green icon.</p>

<p>To not add html code to all pages we just add js script to append the config box. The function is located in inspinia.js file with comment // Append config box / Only for demo purpose</p>

<p>If you want to remove the config box all you need to do is to remove function below this comment.</p>


<hr>
<a name="seed_project" class="anchor"></a>
<h3>Angular Seed Project</h3>

<p> It is an application skeleton for a typical AngularJS web app. You can use it to quickly bootstrap your angular webapp projects. It has all necessary resources/files to help you started new project.
    As your project will grow you will need to add new resources. Look at the full version to select the elements and resources you want to use.

</p>
<p>
    File strucutre for Seed Project
</p>
<pre class="prettyprint linenums">
<code>Angular_Seed_Project/
    ├── <strong>css/</strong>
    ├── <strong>font-awsome/</strong>
    ├── <strong>fonts/</strong>
    ├── <strong>img/</strong>
    ├── <strong>js/</strong>
    ├── <strong>views/</strong>
    ├── index.html
</code></pre>



<hr>
<a name="grunt" class="anchor"></a>
<h3>Angular Seed Project Grunt</h3>

<p> It is an application skeleton for a typical AngularJS web app with implemented Grunt/Bower environment.
    You can use it to quickly bootstrap your angular webapp projects. It has all necessary resources/files.
    As your project will grow you will need to add new resources. Look at the full version to select the elements and resources you want to use.
</p>
<p>
    <strong>First run</strong>
</p>

<p>

    To run Angular Seed Project Grunt you will need a node instaled in your environment. If you don't have a node.js please go to this site <a href="http://nodejs.org">http://nodejs.org</a> and download and install proper version.

</p>
<p>
    Next you will need to install grunt
</p>
<pre class="prettyprint linenums">

npm install -g grunt-cli

</pre>
<p>
    Next you will need to install bower
</p>
<pre class="prettyprint linenums">

npm install -g bower

</pre>

<p>
    And after that go to Angular Seed Project Grunt and run those commands to get all dependencies:
</p>

<pre class="prettyprint linenums">

npm install
bower install

</pre>

<p>Grunt file is based on Yeoman angular generator with some changes. There are three main task that you can do:</p>

<ul>
    <li>
        <code>grunt live</code> to launch a browser sync server on your source files
    </li>
    <li>
        <code>grunt server</code> to launch a server on your optimized application
    </li>
    <li>
        <code>grunt build</code> to build an optimized version of your application in /dist
    </li>
</ul>


<hr>
<a name="gulp" class="anchor"></a>
<h3>Angular Seed Project Gulp</h3>

<p> It is an application skeleton for a typical AngularJS web app with implemented Gulp/Bower environment.
    You can use it to quickly bootstrap your angular webapp projects. It has all necessary resources/files.
    As your project will grow you will need to add new resources. Look at the full version to select the elements and resources you want to use.
</p>
<p>
    <strong>First run</strong>
</p>

<p>

    To run Angular Seed Project Gulp you will need a node instaled in your environment. If you don't have a node.js please go to this site <a href="http://nodejs.org">http://nodejs.org</a> and download and install proper version.

</p>
<p>
    Next you will need to install gulp
</p>
<pre class="prettyprint linenums">

npm install -g gulp

</pre>
<p>
    Next you will need to install bower
</p>
<pre class="prettyprint linenums">

npm install -g bower

</pre>

<p>
    And after that go to Angular Seed Project Gulp and run those commands to get all dependencies:
</p>

<pre class="prettyprint linenums">

npm install
bower install

</pre>

<p>Gulp file is based on angular gulp generator (https://github.com/Swiip/generator-gulp-angular). There are few main task that you can do:</p>

<ul>
    <li>
        <code>gulp</code> or <code>gulp build</code> to build an optimized version of your application in <code>/dist</code>
    </li>
    <li>
        <code>gulp serve</code> to launch a browser sync server on your source files</li>
    <li>
        <code>gulp serve:dist</code> to launch a server on your optimized application</li>
    <li>
        <code>gulp test</code> to launch your unit tests with Karma</li>
    <li>
        <code>gulp test:auto</code> to launch your unit tests with Karma in watch mode</li>
    <li>
        <code>gulp protractor</code> to launch your e2e tests with Protractor</li>
    <li>
        <code>gulp protractor:dist</code> to launch your e2e tests with Protractor on the dist files</li>
</ul>

<p>
    In bower.js file there are specify needed resources for Seed Project.
</p>


<hr>
<a name="meanjs" class="anchor"></a>
<h3>Angular Seed Project MEANJS</h3>

<p> It is an application skeleton for a typical AngularJS with MEANJS (http://meanjs.org/) - Version 0.4.2.
    You can use it to quickly bootstrap your angular webapp projects. It has all necessary resources/files.
</p>
<p>
    <strong>First run</strong>
</p>

<p>

    To run MEANJS Angular Seed Project  you will need a node instaled in your environment. If you don't have a node.js please go to this site <a href="http://nodejs.org">http://nodejs.org</a> and download and install proper version.

</p>
<p>
    Next you will need to install Grunt
</p>
<pre class="prettyprint linenums">

npm install -g grunt-cli

</pre>
<p>
    Next you will need to install bower
</p>
<pre class="prettyprint linenums">

npm install -g bower

</pre>
<p>
    Next you will need to install mongodb. Please go to <a href="https://www.mongodb.org/downloads">https://www.mongodb.org/downloads</a> to install mongodb.
</p>
<p>
    Next you will need to run your mongodb database. As it depends on your platform see mongodb site to run mongo database: <a href="http://docs.mongodb.org/manual/">http://docs.mongodb.org/manual/</a>
</p>
<p>
    And after that go to MEANJS Seed Project and run those commands to get all dependencies:
</p>

<pre class="prettyprint linenums">

npm install
bower install

</pre>
<p>
    In bower.js file there are specify needed resources for Seed Project.
</p>
<p><strong>As this is only a theme to MEANJS we will not copy and put here full docs from MEANJS. Please go to MEANJS doc to get more info
    how to use it <a href="http://meanjs.org/docs.html">http://meanjs.org/docs.html</a> </strong></p>
<p>If you have any questions feel free to contact with us: <a href="mailto:support@webapplayers.com">support@webapplayers.com</a></p>


<a name="change_log" class="anchor"></a>

    <h3>Change log 2.6.2 -> 2.7</h3>

    <ul>

        <strong>New view files</strong>

        <li> views/activity_stream.html</li>
        <li> views/password_meter.html</li>
        <li> views/spinners_usage.html</li>
        <li> views/text_spinners.html</li>

        <hr>
        <strong>Changed views files</strong>
        <li> index.html - update script links to jquery and jquery ui </li>
        <li> views/dashboard_3.html - update css class of sidebar </li>
        <li> views/form_advanced.html - add new example for switchery control </li>
        <li> views/helper_classes.html - change css name in border examples </li>
        <li> views/icons.html - update font awesome icons to new set </li>
        <li> views/layouts.html - correct typos in image names and descriptions </li>
        <li> views/mail_detail.html - correct typo in css clas</li>
        <li> views/skin-config.html - correct typo in css clas</li>
        <li> views/common/navigation.html - add links to new states </li>
        <li> views/common/navigation.html - correct href attribute for second level menu </li>

        <hr>
        <strong>New Inspinia js files</strong>
        <li> <span class="text-muted">No new files</span> </li>

        <hr>
        <strong>Changed Inspinia js files</strong>
        <li> config.js - add new states for new views</li>
        <li> controllers.js - update modalDemoCtrl() function</li>
        <li> controllers.js - add new function passwordMeterCtrl()</li>
        <li> directives.js - add new directive passwordMeter()</li>
        <li> directives.js - update sideNavigation() to handle auto collapse on state change</li>
        <li> directives.js - update iboxTools() and iboxToolsFullScreen() to handle nested iboxs</li>
        <li> inspinia.js - update fix_height() function - correct typo</li>
        <li> inspinia.js - move body-small mechanism outside document ready function</li>
        <li> inspinia.js - update selector for heightWithoutNavbar variable</li>

        <hr>
        <strong>Updates</strong>
        <li> font-awesome/</li>
        <li> js/jquery/</li>
        <li> js/plugins/dataTables/</li>
        <li> js/plugins/ladda</li>
        <li> js/plugins/steps/</li>
        <li> js/plugins/switchery/</li>
        <li> js/plugins/validate/</li>

        <hr>
        <strong>New plugins</strong>
        <li> js/plugins/pwstrength</li>
        <li> css/plugins/textSpinners</li>

        <hr>
        <strong>New images</strong>
        <li> <i>no new images</i></li>

        <hr>
        <strong>CSS/LESS/SCSS/SASS</strong>
        <li> Fix jumping menu on landing page </li>
        <li> Fix bg-colors </li>
        <li> Remove rules for support old IE </li>
        <li> Add styles for third level menu on md-skin </li>
        <li> Improve select2 styles </li>
        <li> Improve menu style </li>
        <li> Clear overwrite native media-body classes </li>
        <li> Improve few styles for IE </li>
        <li> Improve style for summernote </li>
        <li> Correct selected typo </li>
        <li> Fix chat-avatar class rules </li>
        <li> Fix typo in css preprocessor variables </li>

    </ul>

    <h3>Change log 2.6 -> 2.6.2</h3>

    <ul>

        
        <hr>
        <strong>Updates</strong>
        <li> Bootstrap to 3.3.7</li>

        <hr>
        <strong>CSS/LESS/SCSS/SASS</strong>
       <li> Fix the issue with hidden href on mobile mini navbar</li>
        <li> Fix the flickering menu</li>
        <li> Fix Safari modal issue</li>
        <li> Fix Summernote fullscreen mode</li>
        <li> Fix css width helper classes</li>
        <li> Improve content height on fixed navbar</li>
        <li>  Improve landing page on mobile view</li>


    </ul>

    <h3>Change log 2.5 -> 2.6</h3>

    <ul>

        <strong>New view files</strong>

        <li> views/common/pdf_viewer.html - template for pdf</li>
        <li> views/autocomplete.html</li>
        <li> views/datamaps.html</li>
        <li> views/helper_classes.html</li>
        <li> views/pdf_viewer.html</li>
        <li> views/socialbuttons.html</li>

        <hr>
        <strong>Changed views files</strong>
        <li> views/common/navigation.html - add new menu items</li>
        <li> views/form_advanced.html - add new features: tag input, dual select</li>
        <li> views/form_file_ipload.html - add new file input component</li>

        <hr>
        <strong>New Inspinia js files</strong>
        <li> <span class="text-muted">No new files</span> </li>

        <hr>
        <strong>Changed Inspinia js files</strong>
        <li> config.js - add new files for updated plugins</li>
        <li> controllers.js - add new controllers for new views</li>
        <li> directives.js - add new directive for tag input feature </li>

        <hr>
        <strong>Updates</strong>
        <li> js/plugins/dropzone</li>

        <hr>
        <strong>New plugins</strong>
        <li> js/plugins/datamaps</li>
        <li> js/plugins/dualListbox</li>
        <li> js/plugins/ngTags</li>
        <li> js/plugins/pdfjs</li>
        <li> js/plugins/topojson</li>

        <hr>
        <strong>New images</strong>
        <li> <i>no new images</i></li>

        <hr>
        <strong>CSS/LESS/SCSS/SASS</strong>
        <li> Add styles for new pages </li>
        <li> Fix menu jumping issue</li>
        <li> Improve print mode for Firefox</li>
        <li> Improve chosen colors</li>
        <li> Fix boxes layout with md-skin</li>
        <li> Improve custom swithc style</li>
        <li> Add few new css classes - helper classes</li>

    </ul>

    <h3>Change log 2.4 -> 2.5</h3>

    <div class="alert alert-danger">
        Please note that since Inspinia 2.5 we upgrade all Angular project to Angular 1.5 as well as all UI Bootstrap library to 1.1.2.
        This update required to change all prefixes in UI Bootstrap - if you will update your exisitng project full migration path you can find here: https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes.
        All current version are prepared with new prefixes.
    </div>

    <ul>

        <strong>New view files</strong>

        <li> <i>no new files</i></li>

        <hr>
        <strong>Changed views files</strong>
        <h4> All changes for migration to new UI Bootstrap prefixes</h4>
        <li> views/badges_labels.html </li>
        <li> views/buttons.html </li>
        <li> views/carousel.html </li>
        <li> views/draggable.html </li>
        <li> views/ecommerce_payments.html </li>
        <li> views/ecommerce_product.html </li>
        <li> views/faq.html </li>
        <li> views/form_advanced.html </li>
        <li> views/form_basic.html </li>
        <li> views/form_file_upload.html </li>
        <li> views/landing.html </li>
        <li> views/markdown.html </li>
        <li> views/notifications.html </li>
        <li> views/profile_2.html </li>
        <li> views/project_detail.html </li>
        <li> views/social_feed.html </li>
        <li> views/tabs.html </li>
        <li> views/tabs_panels.html </li>
        <li> views/tour.html </li>
        <li> index.html </li>
        <li> views/common/navigation.html</li>
        <li> views/common/footer.html</li>
        <li> views/common/ibox_tools.html</li>
        <li> views/common/ibox_tools_full_screen.html</li>
        <li> views/common/navigation_full_height.html</li>
        <li> views/common/navigation_off_canvas.html</li>
        <li> views/common/top_navigation.html</li>
        <li> views/common/topnavbar.html</li>

        <hr>
        <strong>New Inspinia js files</strong>
        <li> <span class="text-muted">No new files</span> </li>

        <hr>
        <strong>Changed Inspinia js files</strong>
        <li> config.js - add new files for updated plugins</li>
        <li> controllers.js - update prefixes for Modal controller</li>
        <li> directives.js - update dropzone and vectormap directive  </li>
        <li> inspinia.js - update window resize event </li>

        <hr>
        <strong>Updates</strong>
        <li> js/angular - update to 1.5</li>
        <li> js/bootstrap - UI Bootstrap to 1.1.2</li>
        <li> js/plugins/ui-select</li>
        <li> js/plugins/chosen</li>
        <li> js/plugins/dropzone</li>
        <li> js/plugins/ui-sortable</li>

        <hr>
        <strong>New plugins</strong>
        <li> <i>no new plugins</i></li>

        <hr>
        <strong>New images</strong>
        <li> <i>no new images</i></li>

    </ul>


    <h3>Change log 2.3 -> 2.4</h3>

    <ul>

        <strong>New view files</strong>

        <li> views/c3charts.html </li>
        <li> views/clipboard.html </li>
        <li> views/ecommerce_cart.html </li>
        <li> views/i18support.html </li>
        <li> views/markdow.html </li>
        <li> views/loading_buttons.html </li>
        <li> views/tour.html </li>
        <li> views/truncate.html </li>
        <li> views/tree_view.html </li>

        <hr>
        <strong>Changed views files</strong>
        <li> views/common/navigation.html - add new menu elements for new views</li>

        <li> views/agile_board.html - add example code for serialize list</li>
        <li> views/form_advanced.html - add new Touch spin control</li>
        <li> views/landing.html - update page-scroll click event to close menu on select in mobile</li>
        <li> views/table_data_tables.html - replace old swf buttons with new button plugin (update datatables library) </li>
        <li> views/video.html - add script for handle full screen video option</li>
        <li> views/index.html - add angular-sanitize link</li>
        <li> views/index.html - add angular-sanitize link</li>

        <hr>
        <strong>New Inspinia js files</strong>
        <li> <span class="text-muted">No new files</span> </li>

        <hr>
        <strong>Changed Inspinia js files</strong>
        <li> config.js - Add new states </li>
        <li> controllers.js - Add three new controllers (loadingCtrl, datatablesCtrl, truncateCtrl, touchspinCtrl, tourCtrl, jstreeCtrl).  </li>
        <li> directives.js - Add two new directives (resizeable, markdownEditor, touchSpin, truncate)  </li>
        <li> inspinia.js - update fix_height function </li>

        <hr>
        <strong>Updates</strong>
        <li> js/bootstrap - update to 3.3.6 </li>
        <li> js/plugins/dataTables</li>
        <li> js/plugins/datepicker</li>
        <li> js/plugins/pace</li>

        <hr>
        <strong>New plugins</strong>
        <li> js/plugins/touchspin</li>
        <li> js/plugins/jsTree</li>
        <li> js/plugins/ladda</li>
        <li> js/plugins/c3</li>
        <li> js/plugins/d3</li>
        <li> js/plugins/clipboard</li>
        <li> js/plugins/dotdotdot</li>
        <li> js/plugins/bootstrap-tour</li>

        <hr>
        <strong>New images</strong>
        <li> imb/flags- Set of flags images</li>

        <hr>
        <strong>CSS/LESS/SCSS/SASS</strong>
        <li> Add styles for new pages </li>
        <li> Fix buttons shadow on Chrome </li>
        <li> Fix dropdown text colour on md-skin </li>
        <li> Fix pace.js on fixed navbar option </li>
        <li> Fix few glitch animation effect </li>
        <li> Improve nav-tabs on mobile devices </li>
        <li> Fix second level menu on md-skin </li>
        <li> Improve RTL mode </li>
        <li> Add new fixed navbar option </li>
        <li> Ipmore print mode </li>

    </ul>


    <h3>Change log 2.2 -> 2.3</h3>

    <ul>

        <strong>New view files</strong>

        <li> views/contacts_2.html </li>
        <li> views/dashboard_5.html </li>
        <li> views/ecommerce_payments.html</li>
        <li> views/ecommerce_product_detail.html</li>
        <li> views/masonry.html</li>
        <li> views/profile_2.html</li>
        <li> views/slick.html</li>
        <li> views/toastr.html</li>
        <li> views/vote_list.html</li>
        <li> views/common/ibox_tools_full_screen.html</li>

        <hr>
        <strong>Changed views files</strong>
        <li> views/common/navigation.html - add new menu elements for new views</li>

        <li> views/dashboard_4_1.html - Remove 'p-xl' class from wrapper</li>
        <li> views/foo_table.html - Update ibox tools code</li>
        <li> views/form_advanced.html - add select2 examples</li>
        <li> views/project_detail.html - Change animation effect </li>
        <li> views/tabs_panels.html - add example of fullscreen panel and slim scroll panel</li>
        <li> views/index.html - add angular-sanitize link</li>

        <hr>
        <strong>New Inspinia js files</strong>
        <li> <span class="text-muted">No new files</span> </li>

        <hr>
        <strong>Changed Inspinia js files</strong>
        <li> app.js - Add ngSanitize module to app  </li>
        <li> config.js - Add new states </li>
        <li> controllers.js - Add three new controllers (dashboardFive, selectCtrl, toastrCtrl).  </li>
        <li> directives.js - Add two new directives (iboxToolsFullScreen, slimScroll)  </li>

        <hr>
        <strong>Updates</strong>
        <li> js/bootstrap - update to 3.3.5 </li>
        <li> js/plugins/dataTables - update to 1.10.8 </li>

        <hr>
        <strong>New plugins</strong>
        <li> js/plugins/select2 (with css files)</li>
        <li> js/plugins/masonry (with css files)</li>
        <li> js/plugins/slick (with css files)</li>

        <hr>
        <strong>New images</strong>
        <li> css/patterns- Add images for header in Material Design skin</li>

        <hr>
        <strong>CSS/SCSS/SASS</strong>
        <li> Add styles for new pages </li>
        <li> Add new md-skin styles </li>
        <li> Fix ibox-tools when title is large</li>
        <li> Fix landing page menu on small devices</li>
        <li> Fix modal open backdrop with animate.css effect</li>
        <li> Fix dropdown orientation under ibox</li>
        <li> Fix profile menu on fixed sidebar</li>

    </ul>

    <h3>Change log 2.0/2.1 -> 2.2</h3>

    <ul>

        <strong>New view files</strong>

        <li> views/chartist.html </li>
        <li> views/ecommerce_orders.html</li>
        <li> views/ecommerce_product.html</li>
        <li> views/ecommerce_product_list.html</li>
        <li> views/ecommerce_products_grid.html</li>
        <li> views/foo_table.html</li>
        <li> views/metrics.html</li>
        <li> views/social_feed.html</li>
        <li> views/sweet_alert.html</li>
        <li> views/tabs.html</li>
        <li> common/navigation_full_height.html </li>
        <li> common/navigation_off_canvas.html </li>
        <li> views/off_canvas.html</li>
        <li> views/outlook.html</li>

        <li></li>
        <li><i>Incorporate Landing page and other views to full version</i></li>
        <li></li>
        <li> views/errorOne.html</li>
        <li> views/errorTwo.html</li>
        <li> views/forgot_password.html</li>
        <li> views/landing.html</li>
        <li> views/lockscreen.html</li>
        <li> views/login.html</li>
        <li> views/login_two_columns.html</li>
        <li> views/register.html</li>



        <hr>
        <strong>Changed views files</strong>
        <li> views/common/navigation.html - add new menu elements for new views</li>
        <li> views/common/navigation.html - added ".metismenu" class to nav element id="side-menu" (new version of metisMenu)</li>
        <li> views/common/topnavbar.html - Fix links from dropdown</li>
        <li> views/article.html - Add example of comments section</li>
        <li> views/form_advanced.html - Add new new plugins</li>
        <li> views/tabs_panels.html - add example of footer to panel and initial collapsed panel </li>
        <li> views/chat_view.html - Add left/right class to chat panels </li>
        <li> views/landing.html - Add new sections: timeline and comments</li>
        <li> index.html - Update attributes of body tag</li>

        <hr>
        <strong>New Inspinia js files</strong>
        <li> <span class="text-muted">No new files</span> </li>

        <hr>
        <strong>Changed Inspinia js files</strong>
        <li> inspinia.js - Update fix_height for handle height wrapper on fixed-nav  </li>
        <li> translations.js - Add new translations for new pages  </li>
        <li> directives.js - Add three new directives (clockPicker, landingScrollspy, fitHeight)  </li>
        <li> controllers.js - Add three new controllers (chartistCtrl, metricsCtrl, sweetAlertCtrl), add daterange variable.  </li>
        <li> config.js - update jvectormap links, add new states for new pages,
             add new links for new plugins, fix datatables reslove loadPlugin funciton   </li>

        <hr>
        <strong>Updates</strong>
        <li> js/plugins/metisMenu - update to 2.0.2 </li>
        <li> js/plugins/slimscrol - update to 1.3.6 </li>
        <li> js/plugins/jvectormap - update to 2.0.2 </li>
        <li> js/plugins/moment - update to 2.9.0 </li>

        <hr>
        <strong>New plugins</strong>
        <li> js/plugins/clockpicker (with css files)</li>
        <li> js/plugins/daterangepicker (with css files)</li>
        <li> js/plugins/footable (with css files)</li>
        <li> js/plugins/sweetalert (with css files)</li>
        <li> js/plugins/chartist</li>
        <li> css/plugins/awesome-bootstrap-checkbox</li>

        <hr>
        <strong>New images</strong>
        <li> img/landing - Full folder of images used in landing page</li>

        <hr>
        <strong>CSS/SCSS/SASS</strong>
        <li> Add styles for new pages </li>
        <li> Add new metisMenu style </li>
        <li> Add landing page styles </li>
        <li> Add chat-discussion left/right class</li>
        <li> Fix z-index of modal-dialog</li>
        <li> Fix margins on wrapper when fixed-nav is enabled</li>

    </ul>

    <h3>Change log 2.0 - 2.1</h3>

    <strong>Version 2.1 is mainly focused on MeteorJS to provide Meteor version.</strong>
    <p>Please stay tuned for 2.2 version to get new features for Angular version.</p>

    <h3>Change log 1.9 -> 2.0</h3>

    <ul>

        <strong>New view files</strong>
        <li> forgot_password.html </li>
        <li> views/agile_board.html </li>
        <li> views/article.html </li>
        <li> views/blog.html </li>
        <li> views/clients.html </li>
        <li> views/diff.html </li>
        <li> views/draggable.html </li>
        <li> views/idle_timer.html </li>
        <li> views/issue_tracker.html </li>
        <li> views/live_favicon.html </li>
        <li> views/spinners.html </li>
        <li> views/teams_board.html </li>
        <li> views/validation.html </li>
        <li> views/content/right_sidebar.html </li>

        <hr>
        <strong>Changed views files</strong>
        <li> index.html - add angular-idle scirpt</li>
        <li> views/chat_view.html - Add new small-chat element</li>
        <li> views/content.html - Add new right sidebar (ng-include)</li>
        <li> views/navigation.html - Add new menu elements</li>
        <li> views/topnavbar.html - Add new menu element for right sidebar</li>
        <li> views/dashboard_1.html - Add small-chat element</li>
        <li> views/dashboard_2.html - Add small-chat element</li>
        <li> views/dashboard_3.html - Add small-chat element</li>
        <li> views/dashboard_4_1.html - Add small-chat element</li>
        <li> views/faq.html - Fix the collapse effect - Create new div element <code>.faq-answer</code> before <code>p</code> answer. </li>

        <hr>
        <strong>New Inspinia js files</strong>
        <li> <span class="text-muted">No new files</span> </li>

        <hr>
        <strong>Changed js files</strong>
        <li> js/app.js - Add new module ngIdle</li>
        <li> js/config.js - New states for pages, add initial settings for Idle directive</li>
        <li> js/controllers.js - Add new controllers:diff, idleTimer, liveFavicon, formValidation, agileBoard, draggablePanels </li>
        <li> js/directives.js - Add new directives:chatSlimScroll, customValid, fullScroll, closeOffCanvas</li>
        <li> js/inspinia.js - Improve fix_height function, add function for handle right-sidebar position on scroll</li>

        <hr>
        <strong>Updates</strong>
        <li> js/plugins/pace - update Pace to 1.0 </li>
        <li> js/morris/morris.js - update to 0.5 </li>
        <li> bootstrap - update to 3.3.4 </li>

        <hr>
        <strong>New plugins</strong>
        <li> js/plugins/diff_match_patch - Google algorithm for diff functionality </li>
        <li> js/plugins/angular-diff-match-patch</li>
        <li> js/plugins/angular-idle</li>
        <li> js/plugins/tinycon</li>
        <li> js/plugins/ui-sortable</li>

        <hr>
        <strong>New images</strong>
        <li> img/full_height.jpg</li>
        <li> img/off_canvas.jpg</li>

        <hr>
        <strong>CSS/SCSS/SASS</strong>
        <li> Add styles for new pages </li>
        <li> Improve btn-link </li>
        <li> Add colapsed class for initial collapsed ibox </li>
        <li> Fix margins for footer with sidebar fixed  </li>
        <li> Fix responsive in login page   </li>
    </ul>

<h3>Change log 1.9 -> 1.9.2</h3>

<strong>Version 1.9.2 is mainly focused on Ruby on Rails to provide Rails version.</strong>
    <p>Please stay tuned for 2.0 version to get new features for Angular version.</p>

<h3>Change log 1.8 -> 1.9</h3>


<ul>

    <strong>New view files</strong>
    <li> login_two_columns.html </li>
    <li> views/chat_view.html </li>
    <li> views/dashboard_4.html </li>
    <li> views/dashboard_4_1.html </li>
    <li> views/layouts.html </li>

    <hr>
    <strong>Changed views files</strong>
    <li> index.html - move all elements from body to one <code>&lt;div ui-view&gt;&lt;/div&gt;</code> to allow create diferent layouts page</li>
    <li> views/basic_gallery.html - Add new plugin blueimp with lightbox effect</li>
    <li> views/buttons.html - Fix dropdown markup for UI bootstrap 0.12</li>
    <li> views/css_animation.html - As this is state without abstract state we add elements from content.html </li>
    <li> views/dashboard_1.html - Add some translate text</li>
    <li> views/form_advanced.html - Add image crop function</li>
    <li> views/form_basic.html - Fix dropdown markup for UI bootstrap 0.12</li>
    <li> views/grid_options.html - As this is state without abstract state we add elements from content.html</li>
    <li> views/widgets.html - As this is state without abstract state we add elements from content.html</li>

    <hr>
    <strong>New js files</strong>
    <li> js/translations.js - New file for all translate variables</li>

    <hr>
    <strong>Changed js files</strong>
    <li> js/app.js - Add new module ocLazyLoad and remove all module that will be included with lazy load</li>
    <li> js/config.js - Add and specify all resources for all state with ocLazyLoad</li>
    <li> js/controllers.js - Remove <code>morrisChartCtrl </code> controller. Add <code>translateCtrl</code> and <code>imageCrop</code></li>
    <li> js/directives.js - Remove <code>fancyBox </code> and <code>morris</code> directives. Change <code>sideNavigation</code> directive and add $timeout function for metsiMenu.</li>

    <hr>
    <strong>Updates</strong>
    <li> js/plugins/flot - update Flot chart library to version 0.8.3</li>
    <li> font-awesome - update Font awesome to version 4.3.0</li>

    <hr>
    <strong>New plugins</strong>
    <li> js/plugins/blueimp - new plugin for lightbox gallery</li>
    <li> js/plugins/ngImgCrop - new plugin for image crop</li>
    <li> js/angular-translate- new plugin for multi language support</li>

    <hr>
    <strong>New images</strong>
    <li> img/gallery - new set of images for lightbox gallery page</li>
    <li> img/dashbbard4_1.jpg</li>
    <li> img/dashbbard4_2.jpg</li>
</ul>



<a name="contact" class="anchor"></a>
<h3>Contact</h3>
<p>Contact as with email: <a href="mailto:support@webapplayers.com">support@webapplayers.com</a></p>
<hr>
</div>
</div>
</div>

<footer>
    <p>&copy; WebAppLayers 2015 | INSPINIA Admin Theme</p>
</footer>
</div>
</div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>

<script>
    $(function () {
        window.prettyPrint && prettyPrint();
    })
</script>

</body>
</html>